<template>
	<div class="aui-card--fill">
		<div class="mod-sys__role ">
			<div class="userBox">
				<div class="userListText">信息列表</div>
				<el-button class="newAdd" v-if="$hasPermission('sys:user:save')" type="primary"
					@click="addOrUpdateHandle()">新增</el-button>
			</div>
			<el-table v-loading="dataListLoading" :data="dataList" border
				@selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle"
				style="width: 100%;">
				<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
				<el-table-column type="index" label="序号" header-align="center" align="center" width="50">
				</el-table-column>
				<el-table-column prop="name" label="门配置文件名称" header-align="center" align="center"></el-table-column>
				<el-table-column prop="doorConfig" label="门配置文件" header-align="center" align="center">
					<template slot-scope="scope">
						<a href="javascript:void(0);" @click="downloadFile(scope.row.doorConfig,scope.row.name,'txt')">{{scope.row.name+'.txt'}}</a>
					</template>
				</el-table-column>
				<el-table-column prop="createDate" label="登记日期" header-align="center" align="center" width="180">
				</el-table-column>
				<el-table-column prop="sysUserName" label="登记人" header-align="center" align="center"></el-table-column>
				<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="300">
					<template slot-scope="scope">
						<el-button v-if="$hasPermission('sys:role:update')" type="success" round size="mini"
							@click="addOrUpdateHandle(scope.row.id,true)">查看</el-button>
						<el-button v-if="$hasPermission('sys:role:update')" type="primary" round size="mini"
							@click="addOrUpdateHandle(scope.row.id,false)">{{ $t('update') }}</el-button>
						<el-button v-if="$hasPermission('sys:role:delete')" type="danger" round size="mini"
							@click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
				layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
				@current-change="pageCurrentChangeHandle">
			</el-pagination>
			<!-- 弹窗, 新增 / 修改 -->
			<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
			<downFilePath v-if="downloadFileVisible" ref="downloadFile" ></downFilePath>
		</div>
	</div>
</template>

<script>
	import mixinViewModule from '@/mixins/view-module'
	import AddOrUpdate from './doorSet-add-or-update'
	import downFilePath from './downFilePath.vue'
	export default {
		mixins: [mixinViewModule],
		data() {
			return {
				mixinViewModuleOptions: {
					getDataListURL: '/psc/doorconfig/page',
					getDataListIsPage: true,
					activatedIsNeed: true,
					deleteURL: '/psc/doorconfig',
					deleteIsBatch: true
				},
				dataForm: {},
				downloadFileVisible:false,
			}
		},
		components: {
			AddOrUpdate,
			downFilePath
		},
		created() {
		},
		methods:{
			base64ToBlob(urlData, type) {
			    let arr = urlData.split(',');
			    let array = arr[0].match(/:(.*?);/);
			    let mime = (array && array.length > 1 ? array[1] : type) || type;
			    // 去掉url的头，并转化为byte
			    let bytes = window.atob(arr[1]);
			    // 处理异常,将ascii码小于0的转换为大于0
			    let ab = new ArrayBuffer(bytes.length);
			    // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
			    let ia = new Uint8Array(ab);
			    for (let i = 0; i < bytes.length; i++) {
			      ia[i] = bytes.charCodeAt(i);
			    }
			    return new Blob([ab], {
			      type: mime
			    });
			},
			// downloadFile(base64, fileName, fileType){
			// 	this.downloadFileVisible = true
			// 	this.$nextTick(()=>{
			// 		this.$refs.downloadFile.init(base64, fileName, fileType)
			// 	})
				
			// },
			 downloadExportFile (blob, fileName, fileType) {
			    let downloadElement = document.createElement('a');
			    let href = blob;
			    if (typeof blob == 'string') {
			      downloadElement.target = '_blank';
			    } else {
			      href = window.URL.createObjectURL(blob); //创建下载的链接
			    }
			    downloadElement.href = href;
			    downloadElement.download = fileName + '.' + fileType; //下载后文件名
			    document.body.appendChild(downloadElement);
			    downloadElement.click(); //触发点击下载
			    document.body.removeChild(downloadElement); //下载完成移除元素
			    if (typeof blob != 'string') {
			      window.URL.revokeObjectURL(href); //释放掉blob对象
			    }
				//弹出弹框
				this.$message({
				  message: '下载成功,文件在C:\\Users\\OIS\\Downloads(c:\\用户\\OIS\\下载)',
				  type: 'success',
				  duration: 3000,
				  onClose: () => {
				  }
				})
			  },
			
			  /**
			   * desc: base64转文件并下载
			   * @param base64 {String} : base64数据
			   * @param fileType {String} : 要导出的文件类型png,pdf,doc,mp3等
			   * @param fileName {String} : 文件名
			   */
			  downloadFile (base64, fileName, fileType) {
			    let typeHeader = 'data:application/' + fileType + ';base64,' // 定义base64 头部文件类型
			    let converedBase64 = typeHeader + base64;  // 拼接最终的base64
			    let blob = this.base64ToBlob(converedBase64, fileType)  // 转成blob对象
			    this.downloadExportFile(blob, fileName, fileType) // 下载文件
			  }
		}
	}
</script>

<style scoped>
	.card-Box {
		width: 100%;
		height: 10vh;
		background-color: #fff;
		border-radius: 10px;
		margin-bottom: 1.9vh;
		padding: 3vh 0 3vh 3vw;
		box-sizing: border-box;
	}

	.aui-card--fill {
		width: 100%;
		/* height: 750px; */
		padding: 1.8vh 2vw 1.8vh 2vw;
		background-color: #fff;
		border-radius: 10px;
	}

	.selectRegion {
		width: 100%;
		height: 10vh;
	}

	/* .mod-sys__user{
    position: relative;
  } */
	.search {
		margin-left: 6.25vw;
		width: 5.9vw;
		height: 3.8vh;
	}

	.reset {
		width: 5.9vw;
		height: 3.8vh;
		margin-left: 1.875vw;
		background-color: rgba(180, 196, 209, 1);
		border: 1px solid rgba(180, 196, 209, 1);
	}

	.userBox {
		display: flex;
		position: relative;
		width: 100%;
		height: 3vh;
		margin-bottom: 1.9vh;
	}

	.userListText {
		/* width: 5vw; */
		height: 3vh;
		line-height: 3vh;
		font-size: 16px;
	}

	.newAdd {
		position: absolute;
		right: 0;
		width: 5.9vw;
		height: 3vh;
		padding: 0;
	}

	.aui-card--fill>>>.el-table__fixed-right {
		height: 100% !important;
	}
</style>
